<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<jsp:include page="../inc.jsp" />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<script type="text/javascript">
			$(function(){
				$('#tb').datagrid({
					url:'${ctx}/myclass/find',
					fit:true,
		    		border:true,
		    		striped:true,
		    		singleSelect:true,
		    		rownumbers:true,
		    		pagination:true,
		    		pagePosition:'top',
		    		pageSize:20,
		    		pageList:[5,10,15,20,25],
		    		scrollbarSize:18,
		    		sortName:'loginName',
		    		toolbar:'#tbar',
		    		checkOnSelect:false,
		    		remoteSort:true,
		    		columns:[[{
		    			field:'ck',checkbox:true
		    		},{
		    			field:'schoolId',
		    			title:'学校编号',
		    			width:'10%',
		    			sortable:true,
		            	editor:{
		            		type:'numberbox'
		            		}
		    		},{
		    			field:'name',title:'班级名称',width:100,
		    			editor:'textbox'
		    		},{
		    			field:'classType',title:'类型（1：初中；2：高中）',width:'20%',
		            	editor:{
		            		type:'numberbox'
		            		}
		    		},{
		    			field:'studentNum',title:'学生人数',width:'10%',
		            	editor:{
		            		type:'numberbox',
		            		options:{
		            			min:1,
		            			max:500
		            		}
		            	}
		    		},{
		    			field:'createDate',
		    			title:'创建时间',
		            	width:'15%',
		            	formatter:function(v,r,i){
		            		if(v!=undefined&&v.length>10&&v.length<20){
		            			v = v.substring(0,11);
		            		}
		            		return v;
		            	},
		            	editor:{
		            		type:'datebox',
		            		options:{
		            			editable:false
		            		}
		            	}
		    		},{
		    			field:'active',align:'center',
		            	formatter:function(v,r,i){
		            		var str = '';
		            		if(!r.editing){
			            		str = '<a href=\'#\' onclick=\'editRow(this)\'>编辑</a>';
			            		str += '&nbsp;|&nbsp;<a href=\'#\' onclick=\'delUser('+i+')\'>删除</a>'
		            		}else{
		            			str = '<a href=\'#\' onclick=\'saveRow(this)\'>保存</a>';
		            			str += '&nbsp;|&nbsp;<a href=\'#\' onclick=\'cancelRow(this)\'>取消</a>'
		            		}
		            		return str;
		            	}
		    		}]],
		    		onClickRow:function(index,row){
		    			
		    		},
		    		onBeforeEdit:function(index,row){
		    			row.editing=true;
		    			editAction(index);
		    		},
		    		onAfterEdit:function(index,row){
		    			row.editing=false;
		    			editAction(index);
		    		},
		    		onCancelEdit:function(index,row){
		    			row.editing=false;
		    			editAction(index);
		    		}
		    		
		    		
				});
				//实现表格分页的页面过滤器
				setTimeout(function(){
					$('#tb').datagrid({loadFilter:pagerFilter}).datagrid('loadData');
				},10);
			});
			
			var type = 'edit';
			function editAction(index){
				//刷新指定行
				$('#tb').datagrid('refreshRow',index);
				$('#tb').datagrid('updateRow',{
					index:index,
					row:{}
				});
			}
			//点击编辑按钮
			function editRow(target){
				if(getAllRow()){
					$.messager.alert('系统警告','正在编辑状态，无法再编辑。','warning');
					return;
				}
				var tr = $(target).closest('tr.datagrid-row');
				var index = parseInt(tr.attr('datagrid-row-index'));
				$('#tb').datagrid('beginEdit',index);
				type = 'edit';
			}
			//点击取消按钮
			function cancelRow(target){
				var tr = $(target).closest('tr.datagrid-row');
				var index = parseInt(tr.attr('datagrid-row-index'));
				$('#tb').datagrid('cancelEdit',index);
				if('add'==type){
					$('#tb').datagrid('deleteRow',index);
				}
			}
			//点击保存按钮
			function saveRow(target){
				var tr = $(target).closest('tr.datagrid-row');
				var index = parseInt(tr.attr('datagrid-row-index'));
				$('#tb').datagrid('endEdit',index);
				
				//选中行
				$('#tb').datagrid('selectRow',index);
				var row = $('#tb').datagrid('getSelected');
				submitData("${ctx}/myclass/"+type,row);
				
			}
			function insertRow(){
				if(getAllRow()){
					$.messager.alert('系统警告','正在编辑状态，无法新增。','warning');
					return;
				}
				var url='${ctx}/myclass/add';
				$('#tb').datagrid('insertRow',{
					index:0,
					row:{}
				});
				$('#tb').datagrid('selectRow',0);
				$('#tb').datagrid('beginEdit',0);
				type = 'add';
			}
			
			
			function getAllRow(){
				var rows = $('#tb').datagrid('getRows');
				var flat = false;
				for(var i=0;i<rows.length;i++){
					row = rows[i];
					var flat = row.editing;
					if(flat){
						break;
					}
				}
				return flat?true:false;
			}
			
			
			
			
			function batchDel(){
				var cs = $('#tb').datagrid('getChecked');
				console.log(cs);
				$.each(cs, function(i,c) {
					
				});
			}
			
			function delUser(index){
				$('#tb').datagrid('selectRow',index);
				$('#tb').datagrid('checkRow',index);
				$('#tb').datagrid('highlightRow',index);
				var row = $('#tb').datagrid('getSelected');
				$.messager.confirm('删除用户','确认要删除该用户信息?',
					function(r){
						if(r){
							alert("确认删除");
						}
					});
			}
		</script>
		<title></title>
	</head>
	<body>
		<div id="d1"></div>
		<div id="userLayout" class="easyui-layout" data-options="fit:true">   
		       
		    <div data-options="region:'center',
		    	border:false" 
		    	style="padding:0px;background:#eee;">
		    	
		    	<table id="tb"></table>
		    	
		    	
		    </div>   
		</div>
		<div id="tbar">
			<a class="easyui-linkbutton" onclick="insertRow()"
			 data-options="
				iconCls:'icon-eadd',
				plain:true
				">新增</a>
				|
			<a class="easyui-linkbutton" onclick="batchDel()"
			 data-options="
				iconCls:'icon-remove',
				plain:true
				">批量删除</a>
			<input class="easyui-textbox">
			<a class="easyui-linkbutton" data-options="
				iconCls:'icon-search',
				plain:true
				" onclick="javascript:alert(123)">搜索</a>	
		</div>
	</body>
</html>
    
    